<template>
  <div>
    <div v-if="linkText.length!==0" class="cl-link-box" @click="openDialog">
      <span class="cll-text">
        <span class="cllt-name" :title="linkText" v-text="linkText" />
        <!-- <i class="el-icon-close cllt-icon" @click.stop="onRemoveData" /> -->
      </span>
      <a class="cll-btn">修改</a>
    </div>
    <span v-else @click="openDialog">添加跳转链接</span>
    <el-dialog
      class="dialog-window"
      title="添加链接"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-tabs type="card">
        <el-tab-pane label="商品">
          <el-form :inline="true" :model="shopForm" style="margin-top:10px">
            <el-form-item label="商品编码：">
              <el-input v-model="shopForm.code" placeholder="请输入商品编码" clearable />
            </el-form-item>
            <el-form-item label="商品名称：">
              <el-input v-model="shopForm.name" placeholder="请输入商品名称" clearable />
            </el-form-item>
            <el-form-item label="商品品牌：">
              <el-input v-model="shopForm.brand" placeholder="请输入商品品牌" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                查询
              </el-button>
              <el-button @click="onClear">
                清空
              </el-button>
            </el-form-item>
          </el-form>
          <el-card>
            <el-table
              :data="tableData"
              border
              style="width: 100%;"
              stripe
            >
              <el-table-column
                fixed
                prop="code"
                label="商品编码"
                width="150"
              />
              <el-table-column
                prop="brand"
                label="品牌"
                width="120"
              />
              <el-table-column
                prop="name"
                label="商品名称"
                width="120"
              />
              <el-table-column
                prop="detail"
                label="商品详情"
              />
              <el-table-column
                prop="url"
                label="跳转地址"
                width="220"
              />
              <el-table-column
                prop="imgUrl"
                label="图片地址"
                width="220"
              />
              <el-table-column
                prop="creator"
                label="操作人"
                width="120"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="100"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleAdd(scope.row)">
                    添加
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="网站链接">
          <el-input v-model="webLink" style="width:300px;margin-right:20px" />
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd2()" />
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getShopList, addShop, deleteShop, editShop} from '@/api/link/index'
let emptyData = {clickType: 'defItem.clickType', data: null}
export default {
  props: {
    value: Boolean,
    linkObj: {
      type: Object,
      default() {
        return {data: null}
      }
    }
  },
  data() {
    return {
      webLink: '',
      currentData: {...emptyData},
      dialogVisible: false,
      shopForm: {
        name: '',
        code: '',
        brand: '',
        creator: window.localStorage.getItem('username')
      },
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: []
    }
  },
  computed: {

    linkText() {
      console.log('this.linkObj---', this.linkObj)
      if (this.linkObj == null) {
        return ''
      }
      if (this.linkObj.data !== undefined) {
        return this.linkObj.data
      }
      return ''
    }
  },
  methods: {
    onSubmit() {
      this.onLoad()
    },
    onClear() {
      this.shopForm = {
        name: '',
        code: '',
        brand: '',
        creator: window.localStorage.getItem('username')
      }
      this.onLoad()
    },
    openDialog() {
      this.dialogVisible = true
      this.onLoad()
      console.log('linkObj', this.linkObj)
    },
    onLoad() {
      getShopList({
        ...this.shopForm,
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res => {
        let {list, total} = res.data
        this.tableData = list
        this.pager.total = total
      })
    },
    handleAdd(row) {
      // console.log(row)
      this.$emit('update:linkObj', {data: row.url})
      this.dialogVisible = false
    },
    handleAdd2() {
      // console.log(row)
      this.$emit('update:linkObj', {data: this.webLink})
      this.dialogVisible = false
      this.webLink = ''
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-window{
    width: 100%;
    height: 80vh;
}
</style>>

</style>
